<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'

import useModal from '@/hooks/useModal'
const props = defineProps<{
  show: boolean
  info: any
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const formRef = ref() as Ref<FormInstance>
const { store } = useModal()
const detail = reactive({
  address: '',
  backImg: '',
  brief: '',
  city: '',
  district: '',
  ext: '',
  keyword: '',
  lat: '',
  licenseImg: '',
  lng: '',
  name: '',
  logo: '',
  province: '',
  serverRatio: 0,
  streetImg: '',
  isOpenPick: 0,
  extVO: {
    pickAddress: '',
    pickLat: '',
    pickLng: '',
    pickMobile: '',
    pickName: '',
    serveMobile: '',
    serveType: 1,
    serveUrl: '',
    pickOpenDate: '',
    pickOpenTime: '',
  },
})

const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      post(
        { url: '/server-shop/admin/seller/apply/save', data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          emit('update:show', false)
          emit('confirm')
          done(true)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  Object.assign(detail, props.info)
  //   get({ url: '/server-shop/admin/seller/info', data: { id: props.id } }, ({ data }) => {
  //     Object.assign(detail, data)
  //   })
}
onMounted(() => {
  getInfo()
})
</script>
<template>
  <CDrawer v-model:visible="props.show" :footer="false" @before-ok="submit" width="500px" title="查看" @cancel="emit('update:show', false)">
    <a-form :model="detail" ref="formRef" disabled :label-col-props="{ span: 7 }" :wrapper-col-props="{ span: 17 }">
      <a-form-item field="name" label="商户名称">
        <a-input v-model="detail.name" />
      </a-form-item>

      <a-form-item field="address" label="地址" :rules="[{ required: true, message: '请操作坐标拾取获得或手动修改' }]" :validate-trigger="['change', 'blur']">
        <a-input v-model="detail.address" placeholder="请操作坐标拾取获得或手动修改" />
      </a-form-item>

      <a-form-item label="商户头图" field="logo" extra="1:1" :rules="[{ required: true, message: '请上传商户头图' }]" :validate-trigger="[]">
        <Upload :list="detail.logo" v-model:value="detail.logo" :limit="1" />
      </a-form-item>
      <a-form-item label="背景图" field="backImg" extra="646*398" :rules="[{ required: true, message: '请上传背景图' }]" :validate-trigger="[]">
        <Upload disabled :limit="1" :list="detail.backImg" v-model:value="detail.backImg" />
      </a-form-item>
      <a-form-item label="资质图" field="licenseImg" :rules="[{ required: true, message: '请上传资质图' }]" :validate-trigger="[]">
        <Upload disabled :limit="5" :list="detail.licenseImg" v-model:value="detail.licenseImg" />
      </a-form-item>
      <a-form-item label="街景图" field="streetImg" :rules="[{ required: true, message: '请上传街景图' }]" :validate-trigger="[]">
        <Upload disabled :limit="5" :list="detail.streetImg" v-model:value="detail.streetImg" />
      </a-form-item>

      <a-form-item label="简介">
        <a-textarea v-model="detail.brief" placeholder="请输入简介" />
      </a-form-item>
      <a-form-item field="isOpenPick" label="自提点" :rules="[{ required: false, message: '请输入自提点名称' }]" :validate-trigger="['change', 'blur']">
        <a-switch v-model="detail.isOpenPick" :checked-value="1" :unchecked-value="0" placeholder="请选择">
          <template #checked> 开启 </template>
          <template #unchecked> 关闭 </template>
        </a-switch>
      </a-form-item>
      <template v-if="detail.isOpenPick == 1">
        <a-form-item field="extVO.pickName" label="自提点名称" :rules="[{ required: true, message: '请输入自提点名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.extVO.pickName" placeholder="请输入自提点名称" />
        </a-form-item>
        <a-form-item field="extVO.pickMobile" label="自提点电话" :rules="[{ required: true, message: '请输入自提点电话' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.extVO.pickMobile" placeholder="请输入自提点电话" />
        </a-form-item>

        <a-form-item field="extVO.pickAddress" label="自提点地址" :rules="[{ required: true, message: '请操作坐标拾取获得或手动修改' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.extVO.pickAddress" placeholder="请操作坐标拾取获得或手动修改" />
        </a-form-item>
      </template>

      <a-form-item field="extVO.serveType" label="客服类型" :rules="[{ required: false, message: '请选择' }]" :validate-trigger="['change', 'blur']">
        <a-radio-group
          v-model="detail.extVO.serveType"
          :options="[
            { label: '电话', value: '1' },
            { label: '链接', value: '2' },
          ]"
        />
      </a-form-item>
      <a-form-item v-if="detail.extVO.serveType == 1" field="extVO.serveMobile" label="客服电话" :rules="[{ required: false, message: '请输入客服电话' }]" :validate-trigger="['change', 'blur']">
        <a-input v-model="detail.extVO.serveMobile" placeholder="请输入客服电话" />
      </a-form-item>
      <a-form-item v-else field="extVO.serveUrl" label="客服地址" :rules="[{ required: false, message: '请输入客服地址' }]" :validate-trigger="['change', 'blur']">
        <a-input v-model="detail.extVO.serveUrl" placeholder="请输入客服地址" />
      </a-form-item>
      <a-form-item label="营业时间段">
        <a-input v-model="detail.extVO.pickOpenDate" placeholder="示例：周一 - 周五" />
      </a-form-item>
      <a-form-item label="营业时间段">
        <a-input v-model="detail.extVO.pickOpenTime" placeholder="示例：09:00 - 12:00" />
      </a-form-item>
    </a-form>
  </CDrawer>
</template>
<style lang="less" scoped></style>
